﻿@using ETD.Common.Extension;
@using ETD.WebOrganization.Libs.Helper;
@using ETD.WinClient.Config;
@using ETD.Domain.EnumModels;
@using ETD.Domain.WebModels;
@using ETD.Common;
@using ETD.WebOrganization.Libs.Controls;
@model ETD.WebOrganization.Areas.Web.Models.FeedbackEditModel
@{
    ViewBag.Title = "设备管理";
}
@{

}
<style>
    .text-left {
        text-align: left;
    }

    .weui-btn_primary {
        background-color: #4dd1c1;
        width: 300px;
    }

    .securityCheckItem-name {
        font-size: 16px !important;
        line-height: 2 !important;
    }

    .weui-form-preview:after {
        border-bottom: 0px solid #e5e5e5 !important;
    }

    .weui-form-preview {
        margin-top: 32px;
    }

    .weui-picker-container, .weui-picker-overlay {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }

    .weui-picker-container {
        background-color: rgba(0, 0, 0, .4);
        height: 100%;
    }

    #btnNbDeviceSaoyisao {
        width: 50px;
        height: 50px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .NbDevice_icon_saoyisao {
        width: 30px;
        height: 30px;
        margin-top: 5px;
    }

    .NbDeviceOut {
        padding-top: 0px;
        padding-bottom: 0px;
    }
</style>
@Html.Hidden("hdnFeedbackID", Model.FeedbackID)
<div class="weui-form-preview">
    <div class="weui-cells__title">设备代码</div>
    <div class="weui-cells">
        <div class="weui-cell NbDeviceOut">
            <div class="weui-cell__bd">
                <input class="weui-input" id="txtNbDeviceID" name="txtNbDeviceID" type="text" value="@Model.NbDeviceID" placeholder="请输入设备代码" maxlength="100">

            </div>
            <div class="weui-cell__ft">
                <a id="btnNbDeviceSaoyisao">
                    <img class="NbDevice_icon_saoyisao" src="@Url.MapMvcAssets("images/icon_saoyisao.png")">
                </a>
            </div>
        </div>
    </div>

    <div class="weui-cells__title">请选择故障类型</div>
    <div class="weui-cells weui-cells_radio">
        @for (int iType = 0; iType < Model.FacilityIssueTypeList.Count; iType++)
        {
            var facilityIssueType = Model.FacilityIssueTypeList[iType];
            <label class="weui-cell weui-check__label" for="radioFacilityIssueType@(facilityIssueType.ID)">
                <div class="weui-cell__bd">
                    <p>@facilityIssueType.Name</p>
                </div>
                <div class="weui-cell__ft">
                    <input type="radio" class="weui-check" name="radioFacilityIssueType" id="radioFacilityIssueType@(facilityIssueType.ID)"
                           value="@facilityIssueType.ID">
                    <span class="weui-icon-checked"></span>
                </div>
            </label>
        }
    </div>
    <div class="weui-cells__title">问题描述</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea id="txtDescription" class="weui-textarea weui-form-preview__value" placeholder="简单的问题描述将对我们提供更多帮助，非常感谢" rows="3" maxlength="200"></textarea>
            </div>
        </div>
    </div>


    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">图片预览</p>
            <div class="weui-uploader__info">0/2</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles">
                @*<li class="weui-uploader__file" style="background-image:url(@Url.MapMvcAssets("NormalImages/me.png"))"></li>
                <li class="weui-uploader__file" style="background-image:url(@Url.MapMvcAssets("NormalImages/me.png"))"></li>
                <li class="weui-uploader__file" style="background-image:url(@Url.MapMvcAssets("NormalImages/me.png"))"></li>*@
                @*<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(@Url.MapMvcAssets("NormalImages/me.png"))">
                    <div class="weui-uploader__file-content">
                        <i class="weui-icon-warn"></i>
                    </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(@Url.MapMvcAssets("NormalImages/me.png"))">
                    <div class="weui-uploader__file-content">50%</div>
                </li>*@
            </ul>
            <div class="weui-uploader__input-box">
                @*multiple 属性代表可以多选，一次选N个图*@
                @*<input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">*@
                <input id="uploaderInput" class="weui-uploader__input" accept="image/*" type="file">
            </div>
        </div>
    </div>
    <div class="weui-gallery" style="display: none">
        <span class="weui-gallery__img"></span>
        <div class="weui-gallery__opr">
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="btnSubmit">提交</a>
    </div>

</div>

@section ScriptSection{
    <script>

        $(function () {
            PageObj.init();
        });
        var PageObj = {};
        PageObj.init = function () {
            $("#btnNbDeviceSaoyisao").click(PageObj.onBtnNbDeviceSaoyisaoClick);
            $("#btnSubmit").click(PageObj.onBtnSubmitClick);
            PageObj.initImageUploader();
        }
        PageObj.initImageUploader = function () {

            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
            var $uploaderInput = $("#uploaderInput"); //上传按钮+
            var $uploaderFiles = $("#uploaderFiles");    //图片列表
            var $galleryImg = $(".weui-gallery__img");//相册图片地址
            var $gallery = $(".weui-gallery");
            $uploaderInput.on("change", function (e) {
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;

                //name:"14[1].xml"

                console.log(files[0]);

                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];

                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }

                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
                showCommonLoading();
                lrz(files[0], { width: 750, fieldName: "file" }).then(function (data) {
                    var paras = { imgbase64: data.base64 };
                    hideCommonLoading();
                })
            });
            $uploaderFiles.on("click", "li", function () {
                $galleryImg.attr("style", this.getAttribute("style"));
                console.log(this)
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function () {
                $gallery.fadeOut(100);
            });

        }
        PageObj.bindDeviceID = function (nbDeviceID) {
            $("#txtNbDeviceID").val(nbDeviceID);
        }
        PageObj.onBtnNbDeviceSaoyisaoClick = function () {
            if (WinHelper.isWeiXin()) {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        console.log("扫码结果 result=" + result);
                        //alert("扫码结果 result=" + result);
                        //result = "https://sharebedconsumer.fancylabx.com/Qrcode/Jump?deviceId=d4b83b4f-547f-424f-8667-24d60432fba6";
                        //result = "https://sharebedconsumer.fancylabx.com/Qrcode/Jump?id=1548695286153";
                        var id = WinHelper.getUrlParamByUrl(result, "id");
                        console.log("扫码结果 id=" + id);
                        if (StringHelper.isNullOrEmpty(id)) {
                            $.toptip("扫码失败，无效的二维码", 'warning');
                            return;
                        }
                        PageObj.checkDeviceIDExist(id);
                    }
                });
            }
            else {
                $.toptip('请使用微信打开系统，才能使用扫一扫功能', 'warning');
            }
        }
        PageObj.onBtnSubmitClick = function () {
            var checkFormResult = PageObj.checkForm();
            if (!checkFormResult) return;
            PageObj.submit();
        }
        PageObj.checkForm = function () {
            var nbDeviceID = $("#txtNbDeviceID").val();
            if (StringHelper.isNullOrEmpty(nbDeviceID)) {
                $.toptip('请输入设备代码', 'warning');
                return false;
            }
            var radioFacilityIssueType = $("input[name='radioFacilityIssueType']:checked").val();
            if (StringHelper.isNullOrEmpty(radioFacilityIssueType)) {
                $.toptip('请选择故障类型', 'warning');
                return false;
            }
            var description = $("#txtDescription").val();
            if (StringHelper.isNullOrEmpty(description)) {
                $.toptip('请输入问题描述', 'warning');
                return false;
            }



            return true;
        }
        PageObj.submit = function () {
            var paras = {};
            paras.FeedbackID = $("#hdnFeedbackID").val();
            paras.NbDeviceID = $("#txtNbDeviceID").val();
            paras.FacilityIssueTypeID = $("input[name='radioFacilityIssueType']:checked").val();
            paras.Code = $("#txtNbDeviceID").val().trim();
            paras.Description = $("#txtDescription").val().trim();
            console.log(JSON.stringify(paras));

            ajaxPost("@Url.ActionTS("FeedbackEdit", "Feedback")", paras, function (data) {
                console.log(data);
                if (data.Status) {
                    $.toast(data.Info);
                    window.setTimeout(function () {
                        window.location.href = "@Url.ActionTS("FeedbackManage", "Feedback")&feedbackStatusID=@((int)EFeedbackStatus.NotProcess)";
                    }, 2000);
                } else {
                    $.toast(data.Info, "forbidden");
                }
            });
        }
        PageObj.checkDeviceIDExist = function (id) {
            var paras = {};
            paras.Code = id;
            ajaxPost("@Url.Action("CheckFacilityExist", "Facility")", paras, function (data) {
                console.log(data);
                if (data.Status) {
                    var model = data.Data;
                    if (!model.IsExist) {
                        $.toast("设备不存在", "forbidden");
                        return;
                    }
                    PageObj.bindDeviceID(model.Facility.Code);
                } else {
                    $.toptip(data.Info, 'warning');
                }
            });
        }
    </script>
}